<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增模块' : '编辑模块'" width="500px"
             @close="cancel">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
      <el-form-item label="模块名称" prop="name">
        <el-input v-model="form.name" style="width: 370px;"/>
      </el-form-item>
<!--      <el-form-item label="排序" prop="sort">-->
<!--        <el-input v-model.number="sort" style="width: 370px;" :data-sort="sort" min="1"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="背景图">-->
<!--        <el-upload-->
<!--          class="avatar-uploader"-->
<!--          action="http://wwx.api.local/admin/v1/upload/image"-->
<!--          :show-file-list="false"-->
<!--          :on-success="handleAvatarSuccess"-->
<!--          :before-upload="beforeAvatarUpload">-->
<!--          <img v-if="form.bg_img" :src="form.bg_img" class="avatar" style="weight:200Px;height:100px">-->
<!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--        </el-upload>-->
<!--      </el-form-item>-->
      <el-form-item label="字体大小">
        <el-select v-model="form.font_size" placeholder="请选择字体大小">
          <el-option
            v-for="item in fontSizeValue"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker v-model="form.font_color"></el-color-picker>
      </el-form-item>
      <el-form-item label="是否加粗">
        <el-switch
          v-model="form.is_font_weight"
          active-text="加粗"
          inactive-text="不加"
          active-value="1"
          inactive-value="0">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'Form',
    components: { Treeselect },
    props: {
      roles: {
        type: Array,
        required: true,
      },
      isAdd: {
        type: Boolean,
        required: true,
      },
      sup_this: {
        type: Object,
        default: null,
      },
    },
    data() {
      return {
        dialog: false,
        loading: false,
        sort: 1,
        form: {
          id: '',
          name: '',
          short: '',
          bg_img: '',
          font_size: '',
          font_color: '',
          is_font_weight: '',
        },
        fontSizeValue: [{
          value: '14px',
          label: '14px',
        }, {
          value: '16px',
          label: '16px',
        }, {
          value: '18px',
          label: '18px',
        }, {
          value: '22px',
          label: '22px',
        }, {
          value: '24px',
          label: '24px',
        }],
        action_config:{},
        rules: {
          name: [
            { required: true, message: '请输入tab名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
          ],
          sort: [
            // { required: true, message: '请输入排序值', trigger: 'blur' },
            // { min: 1, max: 5, message: '排序可选范围: 1~99999', trigger: 'blur' },
            // { type: 'number', message: '排序必须为数字', trigger: ['blur', 'change'] },
          ],
        },
      }
    },
    created() {
      if (this.isAdd) {
        // console.log(this.form)
        this._getDefaultTabsConfig();
        // console.log(this.isAdd)
      }
    },
    methods: {
      _getDefaultTabsConfig() {
        let _that = this;
        this.$api.permission.visualDraggableConfig
          .getDefaultTabsConfig({})
          .then(result => {
            let data = result.data;
            _that.form.id = data.id;
            _that.form.name = data.name;
            _that.form.bg_img = data.bg_img;
            _that.form.font_size = data.font_size;
            _that.form.font_color = data.font_color;
            _that.form.is_font_weight = data.is_font_weight;
          }).catch(error => {
          console.log(error)
        })
      },
      cancel() {
        this.resetForm()
      },
      doSubmit() {
        this.$refs['form'].validate((valid) => {
          console.log(valid);
          if (valid) {
            this.loading = true
            const _this = this
            if (this.isAdd) {
              this.doAdd()
            } else {
              this.doEdit()
            }
          } else {
            return false
          }
        })
      },
      doAdd() {
        let param = {
          tab_config: JSON.stringify(this.form),
          action_config: ''
        }
        this.$api.permission.visualDraggableConfig
          .addTabsConfig({
            data: param,
          }).then(res => {
          this.dialog = false
          this.resetForm()
          this.$notify({
            title: '添加成功',
            message: 'tab添加成功',
            type: 'success',
            duration: 2500,
          })
          this.loading = false
          this.$parent.$parent.init()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      },
      doEdit() {
        let param = {
          id: this.form.id,
          tab_config: JSON.stringify(this.form),
          action_config: JSON.stringify(this.action_config),
        }

        this.$api.permission.visualDraggableConfig.putTabsConfig({
          data: param,
        }).then(res => {
          this.dialog = false
          this.resetForm()
          this.$notify({
            title: 'tabs修改成功',
            type: 'success',
            duration: 2500,
          })
          this.loading = false
          this.sup_this.init()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      },
      resetForm() {
        this.dialog = false
        this.$refs['form'].resetFields()
        this.roleIds = []
        this._getDefaultTabsConfig()
      },
      handleAvatarSuccess(res) {
        if (res.code == 200) {
          this.form.bg_img = res.data.url;
        }
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$notify({
            title: '上传头像图片大小不能超过 2MB!',
            type: 'error',
            duration: 2500,
          })
        }
        return isLt2M;
      },
    },
  }
</script>

<style scoped>

</style>
